<template>
  <h1>猜数字练习</h1>
  <input type="text" placeholder="猜一猜" v-model="num">
  <button @click="guessNum">猜一猜</button>
  <h4>{{result}}</h4>
</template>

<script setup>
import {ref} from "vue";

//生成一个[1,100]之间的随机数
let x = parseInt(Math.random()*100)+1;
console.log("打个小抄:"+x);
//定义变量用来保存用户猜的数字
const num = ref('');
//定义变量用来保存要显示的结果
const result = ref('');
//定义猜数字的方法
const guessNum = ()=>{
  if(num.value.trim()=='' || isNaN(num.value)){
    num.value = '';
    alert('请输入数字!');
    return;
  }
  if(num.value>x){
    result.value = "猜大了!";
  }else if(num.value<x){
    result.value = "猜小了!";
  }else{
    result.value = "猜对了!";
  }
}
</script>

<style scoped>

</style>
